* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: Arial, sans-serif;background: #1e1e1e;color: white;}header {background: #222;display: flex;align-items: center;padding: 10px 20px;position: relative;z-index: 10;}.menu-toggle {font-size: 24px;cursor: pointer;margin-right: 15px;-webkit-tap-highlight-color: transparent;}.sidebar {position: fixed;top: 0;left: -250px;width: 250px;height: 100%;background: #333;color: white;transition: left 0.3s;padding: 20px;z-index: 1000;}.sidebar.active {left: 0;}.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);display: none;z-index: 999;}.overlay.active {display: block;}.buttons {display: flex;gap: 10px;padding: 10px 20px;}.buttons.top-buttons {justify-content: flex-start;border-radius: 3px;}.buttons.run-button {justify-content: center;padding-top: 15px;}button {padding: 8px 12px;cursor: pointer;border: none;background: #444;color: white;border-radius: 3px;-webkit-tap-highlight-color: transparent;}button-run {padding: 8px 12px;cursor: pointer;border: none;background: #444;color: white; font-family: bold; border-radius: 3px; -webkit-tap-highlight-color: transparent; }button-run:hover { background: #1e90ff;}button.active {transform: scale(0.95); background: #1e90ff;}.preview-screen { width: 100%; border: 2px solid #444; border-radius: 5px; overflow: auto; background: white; margin: auto;} .desktop-frame { width: 1024px; height: 600px;} .mobile-frame { width: 375px; height: 667px;} .editor-container { display: flex; flex-wrap: wrap; padding: 20px; gap: 10px; justify-content: center;} .editor { flex: 1 1 30%; display: flex; flex-direction: column; background: #2d2d2d; border: 1px solid #555; border-radius: 5px;} .editor textarea { height: 300px; background: #1e1e1e; color: #fff; border: none; padding: 10px; resize: vertical; font-family: monospace; font-size: 14px; border-radius: 0 0 5px 5px;} .editor-title { background: #444; padding: 5px 10px; font-weight: bold; border-radius: 5px 5px 0 0;}@media (max-width: 768px) { .desktop-frame { width: 100%; max-width: 100%; height: 400px;} .mobile-frame { width: 375px; max-width: 100%; height: 667px;} .editor { flex: 1 1 100%;} .editor textarea { height: 250px;}} .tool-links { list-style: none; padding: 10px 0;} .tool-links li { margin-bottom: 8px;} .tool-links a { color: white; text-decoration: none; -webkit-tap-highlight-color: transparent;} .tool-links a:hover { text-decoration: none; color: #1e90ff;} .social-text { margin-top: 5px;} .social-icons { display: flex; gap: 10px;margin-top: 10px; -webkit-tap-highlight-color: transparent;} .social-icons svg { transition: transform 0.2s;} .social-icons a:hover svg { transform: scale(1.2);} .site-footer {background: #222; padding: 20px; text-align: center; color: #ccc; margin-top: 30px; border-top: 1px solid #444;} .site-footer a { color: #aaa; text-decoration: none;margin: 0 8px; -webkit-tap-highlight-color: transparent;} .site-footer a:hover { text-decoration: none; color: #1e90ff;} .footer-copy { margin-top: 10px; font-size: 14px;}}